<template>
	<view class="page">
		<Navbar title="商城" scroll-top="80" left-icon="chat" left-icon-size="50rpx" :auto-back="false"
			@left-click="mallMessage" />
		<view class="mall-top" />
		<view class="mall-swiper">
			<u-swiper :list="bannerlist" />
		</view>
		<view class="mall-body">
			<view class="f-row">
				<view class="f-flex" v-for="(i, k) in menuList" :key="k" @click="handleTo(i)">
					<u-image show-loading :show-menu-by-longpress="false" :src="i.image" width="72rpx" height="72rpx"
						shape="circle" />
					<text class="f-text" :class="{ chooseText: selectType == i.id }">
						{{ i.name }}
					</text>
				</view>
			</view>
			<view class="f-row" style="margin: 34rpx">
				<u-image show-loading :show-menu-by-longpress="false" :src="require('@/static/mall/mall-story.png')"
					width="442rpx" height="40rpx" />
			</view>
			<Card-item v-for="(i, k) in storyList" :key="k" :index="i.id" :image="i.cover_img" :title="i.title"
				:bold="false" :sub-title="i.create_time" @click="handleDetail" />
			<u-loadmore :status="status" height="80rpx" />
			<!-- #ifdef H5 -->
			<view style="height: 120rpx" />
			<!-- #endif -->
			<view class="cart-btn" @click="handleCart">
				<u-badge type="error" max="99" :value="cartNumber" absolute :offset="['-14rpx', '-4rpx']" />
				<u-icon :name="require('@/static/mall/cart.png')" size="33rpx" space="5rpx" label="购物车"
					label-pos="bottom" label-size="22rpx" label-color="#FF8528" />
			</view>
		</view>
	</view>
</template>

<script>
	import Navbar from "@/components/Navbar/index";
	import CardItem from "@/components/CardItem/index";

	import config from "@/request/baseUrl.js";
	import {
		mallBanner,
		mallTypeList,
		mallCart
	} from "@/request/mallApi.js";
	import {
		qiuStory
	} from "@/request/qiuApi.js";
	export default {
		components: {
			Navbar,
			CardItem
		},
		data() {
			return {
				bannerlist: [], // 轮播图列表
				menuList: [], // 商品分类列表
				selectType: 1, // 选择分类
				storyList: [], // 故事列表
				page: 1, // 页数
				total: 0, // 总数
				cartNumber: 0, // 购物车数量
				status: "loadmore", // 加载状态
			};
		},
		// 监听页面滚动
		onPageScroll(scroll) {
			uni.$emit("onPageScroll", scroll.scrollTop);
		},
		onReachBottom() {
			console.log(22);
		},
		onPullDownRefresh() {
			this.getBannerList();
			this.getTypeList("refresh");
			this.getDataList();
		},
		onShow() {
			this.getBannerList();
			this.getTypeList();
			this.getDataList();
			this.getCartNumber();
		},
		methods: {
			// 获取首页横幅列表
			getBannerList() {
				mallBanner().then((res) => {
					if (res.code == 1) {
						let list = res.data.data.pageAdverts;
						this.bannerlist = list.map((i) => {
							return config.baseUrl + i.media;
						});
					}
				});
			},
			// 获取商品分类列表
			getTypeList(v) {
				mallTypeList()
					.then((res) => {
						if (res.code == 1) {
							let list = res.data.modulesData.categoryModules;
							list.forEach((i) => {
								i.image = config.baseUrl + i.image;
							});
							this.menuList = list;
							if (list.length) this.selectType = list[0].id;
						}
					})
					.finally(() => {
						if (v) {
							uni.showToast({
								title: "刷新成功",
								icon: "success",
							});
							uni.stopPullDownRefresh();
						}
					});
			},
			// 获取购物车数量
			getCartNumber() {
				mallCart({
					cart: null
				}).then((res) => {
					if (res.code == 1) {
						this.cartNumber = res.data.length;
					}
				});
			},
			// 获取商城故事列表
			getDataList() {
				let data = {
					page: this.page,
					pageSize: 10,
					type: "shopping",
				};
				this.status = "loading";
				qiuStory(data)
					.then((res) => {
						if (res.code == 1) {
							this.storyList =
								this.page == 1 ? res.data.list : this.storyList.concat(res.data.list);
							this.total = res.data.total;
						}
					})
					.finally(() => {
						this.status = this.total >= this.storyList.length ? "nomore" : "loadmore";
					});
			},
			// 消息
			mallMessage() {
				uni.navigateTo({
					url: "/pages/mall/messageCenter"
				});
			},
			// 跳转商品列表
			handleTo(v) {
				this.selectType = v.id;
				uni.navigateTo({
					url: `/pages/mall/goodsList?id=${v.id}`
				});
			},
			// 跳转购物车
			handleCart() {
				this.$author(() => {
					uni.navigateTo({
						url: `/pages/mall/goodsCart`
					});
				});
			},
			// 查看故事详情
			handleDetail(e) {
				uni.navigateTo({
					url: `/pages/qiu/storyDetail?id=${e.id}`
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		font-family: "PingFang SC";
		font-style: normal;
		font-weight: 400;

		.mall-top {
			width: 100%;
			height: 486rpx;
			background: linear-gradient(180deg, $active-color 0%, #3ba19900 100%);
		}

		.mall-swiper {
			position: absolute;
			left: 20rpx;
			right: 20rpx;
			top: 206rpx;
			height: 278rpx;
			z-index: 9;
		}

		.mall-body {
			width: 100%;
			height: 1200rpx;
			position: absolute;
			padding: 20rpx;
			box-sizing: border-box;
			top: 412rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;

			.f-row {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 60rpx;

				.f-flex {
					display: flex;
					align-items: center;
					flex-direction: column;

					.f-text {
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #555555;
					}

					.chooseText {
						color: #fa6821;
						font-weight: 600;
						position: relative;

						&::before {
							content: "";
							position: absolute;
							left: -10rpx;
							top: 0;
							bottom: 0;
							width: 4rpx;
							background-color: #fa6821;
						}
					}
				}
			}
		}

		.cart-btn {
			position: fixed;
			/* #ifdef MP-WEIXIN */
			bottom: 66rpx;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			bottom: 166rpx;
			/* #endif */
			right: 20rpx;
			width: 92rpx;
			height: 92rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			text-align: center;
			background-color: #ffffff;
			box-shadow: 0 0 20rpx rgba(218, 218, 218, 0.5);
		}
	}
</style>